<template>
    <div>
        <div>
            <span class="title text-6 mb-8 mr-4">编辑个人信息</span>
            <span @click="router.back()" class="text-slate-400">返回</span>
        </div>

        <div class="my-8 w-full"></div>
        <div class="my-8 text-5 w-full flex flex-col">
            <el-form :model="editForm" label-position="top" ref="editFormRef">
                <el-form-item label="姓名" required prop="name">
                    <el-input
                        v-model="editForm.name"
                        placeholder="请输入姓名"
                    />
                </el-form-item>
                <el-form-item label="手机号" prop="phone" required>
                    <el-input
                        v-model="editForm.phone"
                        placeholder="请输入手机号"
                    />
                </el-form-item>

                <el-form-item label="性别" required prop="gender">
                    <el-select
                        v-model="editForm.gender"
                        placeholder="请选择性别"
                    >
                        <el-option label="男" value="男" />
                        <el-option label="女" value="女" />
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="Check" @click="editSubmit"
                        >提交</el-button
                    >
                </el-form-item>
            </el-form>
        </div>
        <div>
            <div class="title text-6 mb-8 mr-4">车辆信息</div>
            <div
                v-for="item in editForm.cars"
                class="bg-blue-50 p-4 mb-2 flex justify-between items-center rounded-2"
            >
                <span>{{ item.carNum }}</span>
                <span>{{ item.color }}</span>
                <el-button
                    @click="handleUnbind(item.id)"
                >取消绑定</el-button>
            </div>
            <div class="flex justify-center mt-8">
                <el-button type="primary" icon="plus" @click="addCar"
                    >添加车辆</el-button
                >
            </div>
        </div>
        <div class="add-car">
            <el-dialog
                title="修改车辆信息"
                v-model="addCarDialogVisible"
            
            >
                <el-form
                    :model="addCarForm"
                    label-position="top"
                    ref="addCarFormRef"
                >
                <el-form-item label="车牌号" required prop="carNum">
                        <el-input
                            v-model="addCarForm.carNum"
                            placeholder="请输入车牌号"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="颜色" prop="color">
                        <el-input
                            v-model="addCarForm.color"
                            placeholder="请输入颜色"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button
                            type="primary"
                            icon="Check"
                            @click="addCarSubmit"
                            >提交</el-button
                        >
                    </el-form-item>
                </el-form>
            </el-dialog>
        </div>
    </div>
</template>

<script setup lang="ts">
import { createCarApi, getCarPageApi, updateCarApi } from '@/apis/car'
import { getOwnerByIdApi, updateOwnerApi } from '@/apis/owner'
import dayjs from 'dayjs'
import { ElMessage } from 'element-plus'
import { cloneDeep, keys, pick } from 'lodash-es'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 添加表单
const editDialogVisible = ref(false)
const editFormRef = ref<any>(null)
const defaultEditVal = {
    id: 0,
    name: '',
    phone: '',
    gender: '',
}
const editForm = ref<any>(cloneDeep(defaultEditVal))
// 添加提交
const editSubmit = () => {
    editFormRef.value!.validate(async (valid) => {
        if (valid) {
            const picked = pick(editForm.value, keys(defaultEditVal))
            const id = picked.id
            delete picked.id
            const res = await updateOwnerApi(id, picked)
            if (res) {
                editDialogVisible.value = false
                ElMessage.success('成功')
                // editForm.value = cloneDeep(defaultEditVal)
                // getData()
                router.back()
            }
        } else {
            return false
        }
    })
}

// 点击编辑
const getData = async () => {
    const { id } = JSON.parse(localStorage.getItem('user'))
    const res = (await getOwnerByIdApi(id)) as any
    editForm.value = res
}
getData()


// 解绑
const handleUnbind = async (id) => {
    const res = await updateCarApi(id, { ownerId: null })
    if(res) {
        ElMessage.success('解绑成功')
        getData()
    }
}

const addCarFormRef = ref<any>(null)
const addCarDialogVisible = ref(false)
const defaultAddCarVal = {
    carNum: '',
    color: '',
}
const addCarForm = ref<any>(cloneDeep(defaultAddCarVal))
// 添加提交
const addCarSubmit = () => {
    addCarFormRef.value!.validate(async (valid) => {
        if (valid) {
            // 根据车牌号查询车辆是否存在
            const res = await getCarPageApi({
                carNum: addCarForm.value.carNum,
            }) as any
            const filterd = res.rows.find(item => item.carNum === addCarForm.value.carNum)
            if(filterd) {
                // 如果车辆存在就更新车辆信息
                const res = await updateCarApi(filterd.id, {
                    color: addCarForm.value.color,
                    ownerId: editForm.value.id,
                })
                if(res) {
                    ElMessage.success('添加成功')
                    addCarDialogVisible.value = false
                    getData()
                }
            } else {
                // 如果车辆不存在就添加车辆
                const res = await createCarApi({
                    carNum: addCarForm.value.carNum,
                    color: addCarForm.value.color,
                    ownerId: editForm.value.id,
                })
                if(res) {
                    ElMessage.success('添加成功')
                    addCarDialogVisible.value = false
                    getData()
                }
            }
        } else {
            return false
        }
    })
}

// 添加车辆
const addCar = () => {
    if(addCarFormRef.value) {
        addCarFormRef.value.resetFields()
    }
    addCarDialogVisible.value = true
}
</script>

<style scoped></style>
